<script setup>
import bgframe from '@/assets/img/Frame427320063.png'

const props = defineProps({
  leftColor: {
    type: String,
    default: '#0a5462',
  },
  rightColor: {
    type: String,
    default: '#0a5462',
  },
})
</script>

<template>
  <div
    class="db-card-container flex justify-evenly"
    :style="{ '--left-color': leftColor, '--right-color': rightColor }"
  >
    <img :src="bgframe" alt="" class="absolute bottom-0 right-0 w-424 h-42" />
    <!--<div class="db-card-container-bottom-t"></div>-->
    <!--<div class="db-card-container-bottom-b"></div>-->
    <div class="db-card-c db-card-l w-40%">
      <slot class="z-9999" name="dbLeft"></slot>
    </div>
    <div class="db-card-c db-card-r w-40%">
      <slot class="z-9999" name="dbRight"></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.db-card-container {
  position: relative;
  width: 100%;
  height: 100%;

  .db-card-c {
    height: 80%;
    z-index: 20;
    background: linear-gradient(
      180deg,
      rgba(1, 156, 169, 0) 0%,
      #019ca9 52%,
      rgba(1, 156, 169, 0) 100%
    );
    width: 40%;
  }

  .db-card-l {
    background: linear-gradient(
      180deg,
      rgba(1, 156, 169, 0) 0%,
      var(--left-color) 52%,
      rgba(1, 156, 169, 0) 100%
    );
  }

  .db-card-r {
    background: linear-gradient(
      180deg,
      rgba(1, 156, 169, 0) 0%,
      var(--right-color) 52%,
      rgba(1, 156, 169, 0) 100%
    );
  }

  &-bottom-t {
    position: absolute;
    bottom: 13%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    height: 30%;
    background: linear-gradient(180deg, rgba(52, 237, 253, 0) 0%, #134b58 100%),
      rgba(5, 10, 15, 0.1);
    transform: perspective(0.3em) rotateX(3deg);
    border: 1px solid #25a3b2;
  }

  &-bottom-b {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    height: 30%;
    background: linear-gradient(180deg, rgba(52, 237, 253, 0) 0%, #0e333f 100%),
      rgba(5, 10, 15, 0.1);
    transform: perspective(0.3em) rotateX(3deg);
    border: 1px solid #155161;
  }
}
</style>
